<template>

    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20 ml10">

            <!--搜索条件-->
            <el-row class="text-left">
                <el-col :span="10">
                    <div class="dlblock-mb20">
                        <span class="pr5">分组</span>
                        <el-cascader
                                v-model="query.groups"
                                :options="groups"
                                :show-all-levels="false"
                                :props="{value: 'id', label: 'name',  checkStrictly: true,expandTrigger: 'hover' }"
                                style="width: 150px" clearable @change="showRoute"></el-cascader>
                    </div>
                    <div class="dlblock-mb20">
                        <span class="pr5 ml10">线路</span>
                        <el-select v-model="query.route" style="width: 150px" clearable>
                            <el-option :label="item.name" v-for="item in routes" :value="item.id"></el-option>
                        </el-select>
                    </div>

                    <div class="dlblock-mb20">
                        <span class="pr5 ml10">站点名称</span>
                        <el-input v-model.trim="query.name" size="medium" placeholder="请输入站点名称" style="width: 160px;"
                                  :maxlength="20" show-word-limit clearable></el-input>
                    </div>

                    <div class="dlblock-mb20 pr5 pl5">
                        <el-button @click="query.page = 1,getStationFn()" class="el-icon-search ml5" circle></el-button>
                    </div>
                </el-col>

                <el-col :span="13" align="right">
                    <div class="dlblock-mb20 pr10 ml20">
                        <router-link :to="{path: '/station/edit'}">
                            <el-button type="primary">添加</el-button>
                        </router-link>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-button type="danger" @click="deleteAll">删除</el-button>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-button @click="dialogExportVisible = true">导出列表</el-button>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-button type="primary" @click="downloadBtn()">下载模板<i
                                class="el-icon-download el-icon--right"></i></el-button>
                    </div>
                    <!--<div class="dlblock-mb20 pr10">
                        <el-upload
                                class="upload-demo"
                                :action="config.baseURL + '/api/web/station/import'"
                                :before-upload="beforeUploadFile"
                                :on-success="handleSuccess()"
                                :show-file-list="false"
                                >
                            <el-button type="primary" @click="uploadBtn()">批量添加<i class="el-icon-upload2 el-icon&#45;&#45;right"></i></el-button>
                        </el-upload>
                    </div>-->
                    <div class="dlblock-mb20 pr10">
                        <el-upload
                                class="text-right"
                                name="file"
                                ref="upload"
                                :action="config.baseURL + '/api/web/station/import'"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :auto-upload="false">
                            <el-button slot="trigger" size="medium" type="primary">模板导入</el-button>
                            <el-button style="margin-left: 10px;" size="medium" type="success" @click="submitUpload">
                                确定导入
                            </el-button>
                        </el-upload>
                    </div>

                    <!--弹出的站点对话框-->
                    <el-dialog :visible.sync="dialogExportVisible" @open="getStationFn" width="22%">

                        <el-row>
                            <el-col>
                                <div class="dlblock-mb20">
                                    <span class="pr5">起始页</span>
                                    <el-input v-model.number="exportStationVal.fromPage" size="medium"
                                              style="width: 80px;"
                                              :maxlength="10" clearable></el-input>
                                </div>

                                <div class="dlblock-mb20">
                                    <span class="pr5 ml10">终止页</span>
                                    <el-input v-model.number="exportStationVal.toPage" size="medium"
                                              style="width: 80px;"
                                              :maxlength="10" clearable></el-input>
                                </div>

                                <div class="dlblock-mb20 pr10 ml20">
                                    <el-button type="primary" @click="exportStation">导出</el-button>
                                </div>

                            </el-col>
                        </el-row>

                    </el-dialog>
                </el-col>
            </el-row>

            <!--表格-->
            <el-row>
                <el-table
                        class="my-table"
                        :data="stationList" stripe
                        v-loading="loading"
                        :header-row-class-name="'my-table-header'"
                        ref="myTable"
                        border>
                    <el-table-column align="center" prop="id" label="ID" v-if="false"></el-table-column>

                    <el-table-column align="center" fixed width="80">
                        <template slot="header" slot-scope="scope">
                            <el-checkbox @change="checkAll" v-model="checked"></el-checkbox>
                        </template>
                        <template slot-scope="scope">
                            <el-checkbox v-model="number" :label="scope.row.id" @change="checkDetail(scope.row)">
                                {{(query.page - 1) * query.size + scope.$index + 1}}
                            </el-checkbox>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="name" label="站台位置" width="300">
                        <template slot-scope="{row}">
                            <img :src="getStationLocation(row)"/>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="name" label="站点名称"></el-table-column>
                    <el-table-column align="center" prop="groupName" label="所属分组">
                        <template slot-scope="{row}">
                            <p v-text="row.groupName!=null?row.groupName:'--'"></p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="groupName" label="线路">
                        <template slot-scope="{row}">
                            <span v-for="item in row.route">{{item.name}}&emsp;</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="" label="站台">
                        <template slot-scope="{row}">
                            <span v-for="item in row.stands">{{item.name}}
                                <template v-if="item.remarks!=''&&item.remarks!=null">
                                ({{item.remarks}})
                            </template>
                                &emsp;</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="standCount" label="站台数" width="80px"></el-table-column>
                    <el-table-column align="center" prop="early" label="级别" width="100px">
                        <template slot-scope="{row}">
                            <p v-if="row.rank==0">常规站点</p>
                            <p v-else-if="row.rank==3">大站</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="early" label="允许早到" width="100px">
                        <template slot-scope="{row}">
                            <p>{{row.early}}分钟</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="late" label="允许晚到" width="100px">
                        <template slot-scope="{row}">
                            <p>{{row.late}}分钟</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" fixed="right">
                        <template slot-scope="{row}">
                            <p>
                                <router-link :to="{path:'/station/edit',query:{station:row}}">
                                    <el-button type="text">编辑</el-button>
                                </router-link>
                            </p>
                            <p>
                                <el-button type="text" style="color: #f56c6c" @click="delStationFn(row.id)">删除
                                </el-button>
                            </p>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <br>

            <!--分页控件-->
            <el-row :gutter="20">
                <el-col :span="12" :offset="6" align="center">
                    <el-pagination background layout="total, prev, pager, next" :total="query.total"
                                   :page-size="query.size"
                                   :current-page="query.page" @current-change="pageChange">
                    </el-pagination>
                </el-col>
            </el-row>

        </div>
    </div>

</template>

<script>

    import {deleteAllStation, delStation, exportStationInfo, findRouteByGroup, getGroupTree, getStation} from "@/api"
    import config, {downloadToTagByA} from '@/utils/config'

    export default {
        name: "index1",
        components: {},
        data() {
            return {
                config,
                // 必填项提醒
                required: {
                    required: true,
                    message: '此输入框必填',
                    trigger: 'blur'
                },

                //文件上传
                fileList: [],
                // 加载过渡动画
                loading: false,

                //对话框
                dialogExportVisible: false,

                //查询参数
                query: {
                    groups: [],
                    route: '',
                    name: '',
                    page: 1,
                    size: 6,
                    total: 0,
                },

                //站点导出参数
                exportStationVal: {
                    fromPage: 1,
                    toPage: 1,
                    size: 10,
                },

                //站点列表
                stationList: [],

                //查询下拉选择框参数
                groups: [],
                stationNames: [],
                routes: [],

                //多选id
                stationIds: [],

                //复选框 序号
                number: [],
                checked: false,
            }
        },
        created() {

        },
        watch: {
            'exportStationVal.fromPage': function (value) {
                let reg = /^[+]{0,1}(\d+)$/g;
                if (value == undefined || value == '') {

                } else if (!reg.test(value)) {
                    this.exportStationVal.fromPage = ''
                }
            },
            'exportStationVal.toPage': function (value) {
                let reg = /^[+]{0,1}(\d+)$/g;
                if (value == undefined || value == '') {

                } else if (!reg.test(value)) {
                    this.exportStationVal.toPage = ''
                }
            }
        },
        methods: {
            //批量添加站点,站台模板
            downloadBtn() {
                downloadToTagByA("/api/web/station/export/template", {
                    time: this.date,
                })
            },
            handlePreview(file) {
                console.log(file);
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            submitUpload() {
                this.$refs.upload.submit();
                this.$refs.upload.clearFiles();
            },
            uploadBtn() {

            },
            handleSuccess(response, file, fileList) {
                /* if (res.code == 200){
                     that.$message.success("文件上传成功!")
                     this.checkAll();
                     alert(wertyuio)
                 }
                 alert(5345456463)*/
                //alert(5345456463)
            },
            beforeUploadFile(file) {
                //console.log('before upload');
                //console.log(file);
                let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
                let size = file.size / 1024 / 1024;
                if (extension !== 'xlsx') {
                    this.$message.warning('只能上传后缀是.xlsx的文件');
                }
                if (size > 5) {
                    this.$message.warning('文件大小不得超过5M');
                }
                this.checkAll();
            },
            //站点位置照片
            getStationLocation(row) {
                if (row.stands.length != 0) {
                    var url = []
                    for (var i = 0; i < row.stands.length; i++) {
                        url.push(row.stands[i].lng + ',' + row.stands[i].lat)
                    }
                    var str = url.join('|')
                    return `http://api.map.baidu.com/staticimage/v2?ak=0MA953dkYQM4fQriWe6NaII8QpjeCCZh&width=300&height=110&center=${url[0]}&markers=${str}&zoom=17&markerStyles=m,,0xff0000`
                }
            },

            //复选框加序号
            checkDetail(val) {
                if (event.target.checked == true) {
                    this.stationIds.push(val.id)
                } else {
                    this.stationIds.splice(this.stationIds.indexOf(val.id), 1);
                }
            },

            checkAll() {
                if (this.checked == false) {
                    this.stationIds = []
                    this.number = [];
                } else {
                    this.stationList.forEach((item) => {
                        this.number.push(item.id)
                        this.stationIds.push(item.id)
                    })
                }
            },

            //删除全部
            deleteAll() {
                if (this.stationIds.length != 0) {
                    this.$confirm('此操作将永久删除该站点, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        deleteAllStation({ids: this.stationIds}).then(res => {
                            if (res.code == 200) {
                                this.$message({type: 'success', message: '删除成功'});
                                this.getStationFn()
                            } else {
                                this.$message({type: 'error', message: '删除失败'});
                            }
                        })
                    }).catch(() => {
                        this.$message({type: 'info', message: '已取消删除'});
                    });
                } else {
                    this.$message({type: 'error', message: '请先选择站点'});
                }
            },

            // 获取当前权限下所有分组
            getGroupTreeFn() {
                getGroupTree({}).then(res => {
                    this.groups = res.data.children
                })
            },

            //根据所选分组获取相关线路信息
            showRoute() {
                this.query.route = ''
                findRouteByGroup(this.query.groups != 0 ? this.query.groups[this.query.groups.length - 1] : -1).then(res => {
                    this.routes = res.data
                })
            },


            //条件查询站点
            getStationFn() {
                getStation(this.query).then(res => {
                    if (res != null & res.code == 200) {
                        this.stationList = res.data.list
                        this.query.total = res.data.count
                    }
                })
            },

            //删除站点
            delStationFn(id) {
                this.$confirm('此操作将永久删除该站点, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delStation(id).then(res => {
                        if (res.code == 200) {
                            this.$message({type: 'success', message: '删除成功'});
                            this.getStationFn()
                        } else {
                            this.$message({type: 'error', message: '删除失败'});
                        }
                    })
                }).catch(() => {
                    this.$message({type: 'info', message: '已取消删除'});
                });
            },

            //导出
            exportStation() {
                exportStationInfo({
                    groups: this.query.groups,
                    route: this.query.route,
                    name: this.query.name,
                    fromPage: this.exportStationVal.fromPage,
                    toPage: this.exportStationVal.toPage,
                    size: this.query.size,
                })
            },

            // 分页查询
            pageChange(val) {
                this.query.page = val
                this.getStationFn()
            },


        },
        mounted() {
            this.getStationFn()
            this.getGroupTreeFn()
        }

    }
</script>

<style scoped>
    .my-table /deep/ tr, .my-table /deep/ td {
        padding: 5px !important;
        height: 50px;
        line-height: 50px;
    }
</style>
